<template>
  <div>
    <a-radio-group v-model="commentsType" :disabled="disabled" @change="changeCommentsType">
      <a-radio value="1"> 审核意见 </a-radio>
      <a-radio value="2"> 在线签名 </a-radio>
    </a-radio-group>
    <a-textarea
      v-if="commentsType == '1'"
      v-model="content"
      :disabled="disabled"
      @input="handleChange"
      placeholder="请输入"
      :rows="4"
    />
    <div v-if="commentsType == '2'">
      <img v-if="!disabled&&!edit" :src="value1">
      
      <img v-if="disabled" :src="value1">
      <div v-if="!disabled&&edit" class="div-btn" align="right">
        <sign-canvas
          class="sign-canvas"
          ref="SignCanvas"
          :options="options"
          v-model="value"
        />
        <a-button size="small" @click="canvasClear()">清空</a-button>
        <a-button size="small" type="primary" @click="saveAsImg()"> 确定 </a-button>
      </div>
      <div v-if="!disabled&&!edit" class="div-btn" align="right">
        <a-button size="small" @click="resetSign()">重新签名</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import SignCanvas from "./components/SignCanvas.vue";
import { mapGetters } from "vuex";
export default {
  name: "cc",
  props: ["record", "value", "disabled"],
  // props: {
  //   record: {
  //     type: Object,
  //     require: true
  //   },
  //   value: {
  //     type: String,
  //     default: ''
  //   }
  // },
  components: {
    SignCanvas,
  },
  data() {
    return {
      name: "",
      content: "",
      commentsType: "1",
      options: {
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        isShowBorder: false, //是否显示边框 [可选]
        canvasHeight: 120,
      },
      edit:true,
      index:0,
      value1:this.value
    };
  },
  methods: {
    handleChange(e) {
      // 使用 onChange 事件修改值
      this.$emit("change", e.target.value);
    },
    /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },

    /**
     * 保存图片
     */
    saveAsImg() {
      const img = this.$refs.SignCanvas.saveAsImg();
      // alert(`image 的base64：${img}`);
      this.$emit("change", img);
    },

    changeCommentsType() {
      // if (this.commentsType == "1") {
      //   this.content = "";
      // } else if (this.commentsType == "2") {
      //   this.value = "";
      // }
    },

    resetSign(){
      this.edit = true;
    },

    /**
     * 新加载图像
     */
    loadNew() {
      this.$refs.SignCanvas.loadNew();
    },

    /**
     * 合并加载
     */
    coverLoad() {
      this.$refs.SignCanvas.coverLoad();
    },
    /**
     * 下载图片
     */
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg();
    },
  },
  computed: {},
  watch:{
    value:function(newValue,oldValue){
      if(newValue!=''&&newValue!=null&&this.index==0&&oldValue==''){
        this.edit=false;
        this.index++;
      }
    }
  },
  mounted() {
  },
  updated() {
    if(this.value.indexOf('data:image')!=-1){
      this.commentsType = "2";
    }else{
      this.content = this.value;
    }
    
  },
};
</script>

<style lang="less" scoped>
.sign-canvas {
  display: block;
  margin: 0 auto;
  border: 1px dashed #1890ff;
}
.div-btn {
  margin: 5px 20px;
}
.div-btn button {
  margin-left: 10px;
}
</style>